import React, {Component, PropTypes} from 'react';
import {Tree, Tag, Icon, Switch} from 'antd';
import {Scrollbars} from 'react-custom-scrollbars';

const TreeNode = Tree.TreeNode;

function strSub(str) {
  if (str != null) {
    if (str.length > 40) {
      return str.substring(0, 40) + "...";
    } else {
      return str;
    }
  }
}

class ShareTreeContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: '',
      subname: '',
      selectedKeys: [],
      data: {
        "entitys": []
      }
    }
  }

  onSelect(info) {
    this.props.signal.dispatch(info[0]);
  }

  render() {

    const SubTag = (subname) => {
      if (subname == '') {
        return null
      } else {
        return (
          <Tag color="blue">主题：{subname}</Tag>
        )
      }
    }

    const CategoryLoop = data => data.map((item) => {
      if (item.type == 3) {
        return <TreeNode title={<span><Icon type="file-text"/>&nbsp;&nbsp;&nbsp;{strSub(item.name)}</span>}
                         key={item.id}></TreeNode>;
      } else {
        if (item.tables) {
          return <TreeNode title={<span><Icon type="appstore"/>&nbsp;&nbsp;&nbsp;{strSub(item.name)}</span>}
                           key={item.id}>{TableLoop(item.tables)}</TreeNode>;
        }
        return <TreeNode title={<span><Icon type="appstore"/>&nbsp;&nbsp;&nbsp;{strSub(item.name)}</span>}
                         key={item.id}></TreeNode>;
      }
    });

    const TableLoop = data => data.map((item) => {
      return <TreeNode title={<span><Icon type="file-text"/>&nbsp;&nbsp;&nbsp;{strSub(item.name)}</span>}
                       key={item.id}></TreeNode>;
    });

    const treeNodes = CategoryLoop(this.state.data.entitys);

    return (
      <div>
        {SubTag(this.state.subname)}
        <br/>

        <Scrollbars style={{width: 380, height: 760}}
                    autoHide={true}
                    autoHideTimeout={1000}
                    autoHideDuration={200}
                    thumbMinSize={30}
                    universal={true}>
          <Tree className="image" showLine
                onSelect={this.onSelect.bind(this)}
          >
            {treeNodes}
          </Tree>
        </Scrollbars>
      </div>
    );
  }
}

export default ShareTreeContainer;
